<!-- 卡片>消防维保-->
<template>
  <div class="fire-maintenance">
    <div class="card-title">
      <span class="card-title-text" @click="$Ctl.enterChild('Maintenance',{ orgIds: orgIds })">消防维保</span>
    </div>
    <div class="maintenance-list">
      <!-- 维保巡查 -->
      <div class="maintenance-item patrol">
        <div class="echart-wrap" :id="'patrolPie_'+getNewId"></div>
        <div class="maintenance-type">
          <p class="maintenance-type-name">维保巡查</p>
          <p v-if="inspectTotal!=0" class="maintenance-type-value">{{ patrolPercent }}%</p>
          <p v-if="inspectTotal==0" class="maintenance-type-value" style="font-size:15px">本期无任务</p>
        </div>
      </div>
      <!-- 保养 -->
      <div class="maintenance-item maintain">
        <div class="echart-wrap" :id="'maintainPie_'+getNewId"></div>
        <div class="maintenance-type">
          <p class="maintenance-type-name">保养</p>
          <p v-if="maintainTotal!=0" class="maintenance-type-value">{{ maintainPercent }}%</p>
          <p v-if="maintainTotal==0" class="maintenance-type-value" style="font-size:15px">本期无任务</p>
        </div>
      </div>
      <!-- 单点测试 -->
      <div class="maintenance-item single-point-test">
        <div class="echart-wrap" :id="'singlePointTestPie_'+getNewId"></div>
        <div class="maintenance-type">
          <p class="maintenance-type-name">单点测试</p>
          <p v-if="singleTestTotal!=0" class="maintenance-type-value">{{singlePointTestPercent}}%</p>
          <p v-if="singleTestTotal==0" class="maintenance-type-value" style="font-size:15px">本期无任务</p>
        </div>
      </div>
      <!-- 联动测试 -->
      <div class="maintenance-item linkage-test">
        <div class="echart-wrap" :id="'linkageTestPie_'+getNewId"></div>
        <div class="maintenance-type">
          <p class="maintenance-type-name">联动测试</p>
          <p v-if="testTotal!=0" class="maintenance-type-value">{{linkageTestPercent}}%</p>
          <p v-if="testTotal==0" class="maintenance-type-value" style="font-size:15px">本期无任务</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
import { getMonthMaintainStat } from "@/api/maintain";
import { type } from "os";
import { connect } from "net";

export default {
  props: {
    orgId: {
      default() {
        return false
      }
    }
  },
  data() {
    return {
      patrolPercent: "60%", // 维保巡查百分比
      maintainPercent: "60%", // 保养百分比
      singlePointTestPercent: "60%", // 单点测试百分比
      linkageTestPercent: "60%", // 联动测试百分比
      testComplete: 0, //联动测试完成数
      singleTestComplete: 0, //单点测试完成数
      maintainComplete: 0, //保养完成数
      inspectTotal: 0, //维保巡查总数
      maintainTotal: 0, //保养总数
      testTotal: 0, //联动测试总数
      singleTestTotal: 0, //单点测试总数
      inspectComplete: 0, //巡查完成数
      data: [],
      getNewId: (new Date()).getTime(),
      orgIds:this.orgId || this.$store.state.userInfo.organizationIds,
      isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
    };
  },
  created() {
    let that = this;
    that.getData()
    
    if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
      window.FunList.fireMaintenance_ws = that.getData
    }
  },
  methods: {
    getData(){
      let that = this;
      // 获取数据
      getMonthMaintainStat({
        orgIds: that.orgId || that.$store.state.userInfo.organizationIds
      }).then(res => {
        that.patrolPercent = res.data.inspectPercent;
        that.maintainPercent = res.data.maintainPercent;
        that.singlePointTestPercent = res.data.singleTestPercent;
        that.linkageTestPercent = res.data.testPercent;
        that.testComplete = res.data.testComplete;
        that.singleTestComplete = res.data.singleTestComplete;
        that.maintainComplete = res.data.maintainComplete;
        that.inspectComplete = res.data.inspectComplete;
        that.singleTestTotal = res.data.singleTestTotal;
        that.testTotal = res.data.testTotal;
        that.maintainTotal = res.data.maintainTotal;
        that.inspectTotal = res.data.inspectTotal;
        that.data = res.data;
        that.$nextTick(() => {
          that.initEcharts(
            'patrolPie_'+that.getNewId,
            '#F4C605',
            '#BAC1C3',
            that.inspectComplete,
            that.inspectTotal - that.inspectComplete
          );
          that.initEcharts(
            'maintainPie_'+that.getNewId,
            '#05C0FD',
            '#BAC1C3',
            that.maintainComplete,
            that.maintainTotal - that.maintainComplete
          );
          that.initEcharts(
            'singlePointTestPie_'+that.getNewId,
            '#0AD9C9',
            '#BAC1C3',
            that.singleTestComplete,
            that.singleTestTotal - that.singleTestComplete
          );
          that.initEcharts(
            'linkageTestPie_'+that.getNewId,
            '#ED45AA',
            '#BAC1C3',
            that.testComplete,
            that.testTotal - that.testComplete
          );
        });
      });
    },
    // 图表初始化（传参数Id,已完成颜色，未完成颜色，完成数量，未完成数量）
    initEcharts(domId, doneColor, notdoneColor, done, notdone) {
      // 图表配置
      let option = {
          tooltip: {
          show: true,
          position: ["5%", "78%"],
          formatter: "{b} : {c}"
        },
        series: [
          {
            name: "消防巡检",
            type: "pie",
            radius: [22, 27],
            color: doneColor,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              {
                value: done,
                name: "已完成数量"
              },
              {
                value: notdone,
                name: "未完成数量",
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          },
          {
            type: "pie",
            radius: [18, 22],
            color: notdoneColor,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              {
                value: done,
                name: "已完成数量",
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: notdone,
                name: "未完成数量"
              }
            ]
          }
        ]
      };
      let option1 = {
        tooltip: {
          trigger: "无任务",
          formatter: "本期无任务"
        },
        series: [
          {
            name: "本期无数据",
            type: "pie",
            radius: [18, 22],
            color: notdoneColor,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },

            data: [{ value: 0, name: "本期无任务" }]
          }
        ]
      };
      Echarts.init(document.getElementById(domId)).setOption((notdone!=0 || done!=0)?option:option1);
    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.fire-maintenance {
  position: relative;
  height: 100%;
  width: 100%;
  .maintenance-list {
    position: absolute;
    top: 48px;
    width: 100%;
    height: calc(100% - 48px);
    display: flex;
    flex-flow: wrap;
    .maintenance-item {
      display: flex;
      width: 50%;
      height: 50%;
      .echart-wrap {
        width: 50%;
        height: 100%;
      }
      .maintenance-type {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 50%;
        height: 100%;
        .maintenance-type-name {
          font-size: 22px;
          line-height: 34px;
          color: #fff;
        }
        .maintenance-type-value {
          font-size: 26px;
          line-height: 36px;
          font-weight: bold;
        }
      }
    }
    .patrol {
      .maintenance-type-value {
        color: #edc744;
      }
    }
    .maintain {
      .maintenance-type-value {
        color: #4dacf9;
      }
    }
    .single-point-test {
      .maintenance-type-value {
        color: #62d5d9;
      }
    }
    .linkage-test {
      .maintenance-type-value {
        color: #d65397;
      }
    }
  }
}
</style>